<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- /fasttmp/mkdist-qt-4.3.5-1211793125/qtopia-core-opensource-src-4.3.5/doc/src/designer-manual.qdoc -->
<head>
  <title>Qt 4.3: Creating Main Windows in Qt Designer</title>
  <link rel="prev" href="designer-using-containers.html" />
  <link rel="contents" href="designer-manual.html" />
  <link rel="next" href="designer-connection-mode.html" />
  <link href="classic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" width="32"><a href="http://www.trolltech.com/products/qt"><img src="images/qt-logo.png" align="left" width="32" height="32" border="0" /></a></td>
<td width="1">&nbsp;&nbsp;</td><td class="postheader" valign="center"><a href="index.html"><font color="#004faf">Home</font></a>&nbsp;&middot; <a href="classes.html"><font color="#004faf">All&nbsp;Classes</font></a>&nbsp;&middot; <a href="mainclasses.html"><font color="#004faf">Main&nbsp;Classes</font></a>&nbsp;&middot; <a href="groups.html"><font color="#004faf">Grouped&nbsp;Classes</font></a>&nbsp;&middot; <a href="modules.html"><font color="#004faf">Modules</font></a>&nbsp;&middot; <a href="functions.html"><font color="#004faf">Functions</font></a></td>
<td align="right" valign="top" width="230"><a href="http://www.trolltech.com"><img src="images/trolltech-logo.png" align="right" width="203" height="32" border="0" /></a></td></tr></table><p>
[Previous: <a href="designer-using-containers.html">Using Containers in Qt Designer</a>]
[<a href="designer-manual.html">Contents</a>]
[Next: <a href="designer-connection-mode.html">Qt Designer's Signals and Slots Editing Mode</a>]
</p>
<h1 align="center">Creating Main Windows in Qt Designer<br /><small></small></h1>
<p><i>Qt Designer</i> can be used to create user interfaces for different purposes, and provides different kinds of form templates for each of these. The main window template is used to create application windows with menu bars, toolbars, and dock widgets.</p>
<ul><li><a href="#the-main-window-template">The Main Window Template</a></li>
<li><a href="#menus">Menus</a></li>
<li><a href="#toolbars">Toolbars</a></li>
<li><a href="#actions">Actions</a></li>
<li><a href="#dock-widgets">Dock Widgets</a></li>
</ul>
<a name="the-main-window-template"></a>
<h2>The Main Window Template</h2>
<p>Create a new main window by opening the <b>File</b> menu and select the <b>New Form..&#x2e;</b> option, or by pressing <b>Ctrl+N.</b>. Then select the <b>Main Window</b> template.</p>
<p>The template provides a main application window which contains a menu bar and a toolbar by default; these can be removed if they are not required.</p>
<p>If you remove the menu bar, a new one can be created by selecting the <b>Create Menu Bar</b> option from the context menu, obtained by right-clicking within the main window form.</p>
<p>An application can only have one menu bar, but several toolbars can be added.</p>
<a name="menus"></a>
<h2>Menus</h2>
<p>Menus are added to the menu bar by modifying the <b>Type Here</b> placeholders. One of these is always present for editing purposes, and will not be displayed in the preview or in the finished window.</p>
<p>Once created, the properties of a menu can be accessed using the <a href="designer-editing-mode.html#the-property-editor">Property Editor</a>, and each menu can be accessed for this purpose via the <a href="designer-editing-mode.html#the-object-inspector">The Object Inspector</a>.</p>
<p>Existing menus can be removed by opening a context menu over the label in the menu bar, and selecting <b>Remove Menu 'menu_name'</b>.</p>
<a name="creatingamenu"></a><p><table align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/designer-creating-menu1.png" /></td><td><img src="images/designer-creating-menu2.png" /></td><td><b>Creating a Menu</b><p>Double-click the placeholder item to start the editing process.</p>
<p>The menu text is displayed using a line edit, and can be modified.</p>
</td></tr>
<tr valign="top" class="even"><td><img src="images/designer-creating-menu3.png" /></td><td><img src="images/designer-creating-menu4.png" /></td><td>Insert the required text for the new menu. Inserting an ampersand character (&amp;) causes the letter following it to be used as a mnemonic for the menu.<p>Press <b>Return</b> or <b>Enter</b> to accept the new text, or press <b>Escape</b> to reject it. You can undo the editing operation later if required.</p>
</td></tr>
</table></p>
<p>Menus can also be rearranged in the menu bar with simple drag and drop operations. Simply click and drag the menu you want to move, and drop it in the required location. A vertical red line indicates the position where the menu will be inserted.</p>
<p>Menus can contain any number of entries and separators, and can be nested to the required depth. Adding new entries to menus can be achieved by navigating the menu structure in the usual way.</p>
<a name="creatingamenuentry"></a><p><table align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/designer-creating-menu-entry1.png" /></td><td><img src="images/designer-creating-menu-entry2.png" /></td><td><b>Creating a Menu Entry</b><p>Double-click the <b>new action</b> placeholder to start the editing process, or double-click <b>new separator</b> to insert a new separator line after the last entry in the menu.</p>
<p>The menu entry's text is displayed using a line edit, and can be modified.</p>
</td></tr>
<tr valign="top" class="even"><td><img src="images/designer-creating-menu-entry3.png" /></td><td><img src="images/designer-creating-menu-entry4.png" /></td><td>Insert the required text for the new entry, optionally using the ampersand character (&amp;) to mark the letter to use as a mnemonic for the entry.<p>Press <b>Return</b> or <b>Enter</b> to accept the new text, or press <b>Escape</b> to reject it. The action created for this menu entry will be accessible via the <a href="#theactioneditor">Action Editor</a>, and any associated keyboard shortcut can be set there.</p>
</td></tr>
</table></p>
<p>Just as with menus, entries can be moved around using drag and drop operations. When an entry is dragged over a closed menu, the menu will open to allow it to be inserted there. Since menu entries are based on actions, they can also be dropped onto toolbars, where they will be displayed as toolbar buttons.</p>
<a name="toolbars"></a>
<h2>Toolbars</h2>
<p>Toolbars are added to a main window in a similar way to the menu bar: Select the <b>Add Tool Bar</b> option from the form's context menu. Alternatively, if there is an existing toolbar in the main window, you can click the arrow at its right-hand end to create a new toolbar.</p>
<p>Toolbar buttons are created by using the action system to populate each toolbar, rather than by using specific button widgets from the widget box. Since actions can be represented by menu entries and toolbar buttons, they can be moved between menus and toolbars. To share an action between a menu and a toolbar, drag its icon from the <a href="#theactioneditor">Action Editor</a> to the toolbar rather than from the menu where its entry is located.</p>
<p>New actions for menus and toolbars can be created in the Action Editor.</p>
<a name="actions"></a>
<h2>Actions</h2>
<p>With the menu bar and the toolbars in place, it's time to populate them with actions: <i>Qt Designer</i> provides an action editor to simplify the creation and management of actions.</p>
<a name="theactioneditor"></a><p><table align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/designer-action-editor.png" /></td><td><b>The Action Editor</b><p>Enable the action editor by opening the <b>Tools</b> menu, and switching on the <b>Action Editor</b> option.</p>
<p>The action editor allows the user to create <b>New</b> actions, as well as deleting (<b>Delete</b>) actions. It also provides a search facility (<b>Filter</b>) using the action's text.</p>
</td></tr>
</table></p>
<p>To create an action, use the action editor's <b>New</b> button which will pop up an input dialog. Provide the new action with a <b>Text</b>. This is the text that will appear in a menu entry and as the actions tooltip. The text is also automatically added to an &quot;action&quot; prefix creating the action's <b>Object Name</b>.</p>
<p>In addition, the dialog provides the option of selecting an <b>Icon</b> for the action, as well as removing the current icon.</p>
<p>Once the action is created, it can be used wherever actions are applicable.</p>
<a name="addinganaction"></a><p><table align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/designer-adding-menu-action.png" /></td><td><img src="images/designer-adding-toolbar-action.png" /></td><td><b>Adding an Action</b><p>To add an action to a menu or a toolbar, simply press the left mouse button over the action in the action editor, and drag it to where it is required.</p>
<p><i>Qt Designer</i> provides highlighted guide lines that tell you where the action will be added. Release the mouse button to add the action when you have found the right spot.</p>
</td></tr>
</table></p>
<a name="dock-widgets"></a>
<h2>Dock Widgets</h2>
<p>Since dock widgets are <a href="designer-using-containers.html">container widgets</a>, they can be added to a form in the usual way. When added to a form, dock widgets are not placed in any particular dock area by default; you need to set the <b>docked</b> property to true for each widget and choose an appropriate value for its <b>dockWidgetArea</b> property.</p>
<a name="addingadockwidget"></a><p><table align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/designer-adding-dockwidget.png" /></td><td><b>Adding a Dock Widget</b><p>To add a dock widget, simply drag one from the <b>Containers</b> section of the widget box, and drop it onto the main form area. Just as with other widgets, its properties can be modified with the Property Editor.</p>
<p>Since dock widgets can be optionally floated as independent tool windows, it is useful to give them window titles by setting their <b>windowTitle</b> properties. This also helps to identify them on the form.</p>
</td></tr>
</table></p>
<p>
[Previous: <a href="designer-using-containers.html">Using Containers in Qt Designer</a>]
[<a href="designer-manual.html">Contents</a>]
[Next: <a href="designer-connection-mode.html">Qt Designer's Signals and Slots Editing Mode</a>]
</p>
<p /><address><hr /><div align="center">
<table width="100%" cellspacing="0" border="0"><tr class="address">
<td width="30%">Copyright &copy; 2008 <a href="trolltech.html">Trolltech</a></td>
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
<td width="30%" align="right"><div align="right">Qt 4.3.5</div></td>
</tr></table></div></address></body>
</html>
